<template>
  <div class="app-container" style="padding: 0">
    <!-- <div style="margin-bottom: 20px;">
            <div class="total-box" style="padding-bottom: 10px;border-bottom: 1px solid #909399;">
                <span>报名 2268人</span>
                <span>待审 2268人</span>
                <span v-if="examType === 1">待缴 2268人</span>
                <span v-if="examType === 1">已缴待审 2268人</span>
                <span v-if="examType === 1">缴费不通过 2268人</span>
                <span v-if="examType === 1">实缴 2268人</span>
                <span>报名截止时间：2024/04/25 15:39:00</span>
                <span>笔试时间：2024/04/25 15:39:00</span>
            </div>
            <div class="total-box">
                <span>销售 1/30</span>
                <span>项目经理 1/2</span>
                <span>投资经纪人 1/2</span>
            </div>
        </div> -->
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="68px"
    >
      <el-form-item label="考生姓名" prop="careerTitle">
        <el-input
          v-model="queryParams.fullName"
          placeholder="请输入考生姓名"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="审核状态" prop="careerTitle">
        <el-select
          v-model="queryParams.auditStatus"
          placeholder="请选择审核状态"
        >
          <el-option
            v-for="item in checkStatusList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="缴费状态" prop="careerTitle" v-if="examType === 1">
        <el-select v-model="queryParams.payStatus" placeholder="请选择缴费状态">
          <el-option
            v-for="item in checkPayStatusList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>

    <el-row>
      <el-col :span="1.5">
        报名: {{ statistics.enrollCount || 0 }}人, 待审{{
          statistics.waitCheck || 0
        }}人, 待缴{{ statistics.waitPay || 0 }}人, 已缴待审{{
          statistics.payCheck || 0
        }}人, 缴费不通过{{ statistics.payNoPass || 0 }}人, 实缴{{
          statistics.payPass || 0
        }}人,
      </el-col>
    </el-row>

    <el-row :gutter="10" class="mb8">
      <el-button
        style="float: right"
        type="primary"
        plain
        size="mini"
        @click="handleMakeTicket"
        >生成准考证</el-button
      >
    </el-row>

    <el-table
      v-loading="loading"
      :data="joinCompanyList"
      @selection-change="handleSelectionChange"
      height="500px"
    >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="姓名" align="center" prop="fullName" />
      <el-table-column label="性别" align="center" prop="gender">
        <template slot-scope="scope">
          <span>{{ scope.row.gender === 0 ? "男" : "女" }}</span>
        </template>
      </el-table-column>
      <el-table-column label="年龄" align="center" prop="careerPageviews">
        <template slot-scope="scope">
          <span>{{ calculateAge(scope.row.dateBirth) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="电话号码"
        align="center"
        prop="contactInformation"
      />
      <el-table-column label="审核状态" align="center" prop="auditStatus">
        <template slot-scope="scope">
          <span>{{ mapAuditStatus(scope.row.auditStatus).text }}</span>
        </template>
      </el-table-column>
      <el-table-column
        v-if="examType === 1"
        label="缴费状态"
        align="center"
        prop="payStatus"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.payStatus === 0" style="color: #909399"
            >待支付</span
          >
          <span v-if="scope.row.payStatus === 1" style="color: #e6a23c"
            >待审核</span
          >
          <span v-if="scope.row.payStatus === 2" style="color: #67c23a"
            >已通过</span
          >
          <span v-if="scope.row.payStatus === 3" style="color: #f56c6c"
            >不通过</span
          >
        </template>
      </el-table-column>
      <el-table-column label="考试类型" align="center" prop="examType">
        <template slot-scope="scope">
          <span v-if="scope.row.examType === 0">免费</span>
          <span v-if="scope.row.examType === 1">收费</span>
        </template>
      </el-table-column>
      <el-table-column
        label="报名岗位"
        align="center"
        prop="enrollRequest.positionName"
      />
      <el-table-column
        label="考场"
        align="center"
        prop="enrollRequest.venueName"
      />
      <el-table-column
        label="准考证号"
        align="center"
        prop="enrollRequest.candNumber"
      />
      <el-table-column
        label="报名时间"
        align="center"
        prop="enrollRequest.registrationTime"
      />
      <!-- <el-table-column label="考场" align="center" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <span v-if="scope.row.ifVerify === 0" style="color: #E6A23C;">待审核</span>
                    <span v-if="scope.row.ifVerify === 1" style="color: #67C23A;">通过</span>
                    <span v-if="scope.row.ifVerify === 2" style="color: #F56C6C">未通过</span>
                </template>
            </el-table-column> -->

      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
        width="260"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            @click="handleApplyCheck(scope.row)"
            v-hasPermi="['system:recuit:edit']"
            >报名审核</el-button
          >
          <el-button
            v-if="examType === 1"
            size="mini"
            type="text"
            @click="handlePayCheck(scope.row)"
            v-hasPermi="['system:recuit:edit']"
            >缴费审核</el-button
          >
          <el-button
            size="mini"
            type="text"
            @click="handleViewStuInfo(scope.row)"
            v-hasPermi="['system:recuit:edit']"
            >考生信息</el-button
          >
          <el-button
            size="mini"
            type="text"
            @click="handleViewExamInfo(scope.row)"
            v-hasPermi="['system:recuit:edit']"
            >考试信息</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize" @pagination="getList" /> -->

    <!-- 报名审核弹窗 -->
    <el-dialog
      :title="dialogType === 'checkApply' ? '报名审核' : '考生信息'"
      :visible.sync="examineFlag"
      width="50%"
      append-to-body
    >
      <div class="resume-content">
        <div
          style="
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-bottom: 6px;
            border-bottom: 1px solid #dcdfe6;
          "
        >
          <h3 class="common-title">初审</h3>
          <div
            v-if="mapAuditStatus(resumeInfo.auditStatus)"
            :class="[
              'status-text',
              mapAuditStatus(resumeInfo.auditStatus).class,
            ]"
            style="font-weight: 600"
          >
            {{ mapAuditStatus(resumeInfo.auditStatus).text }}
          </div>
        </div>
        <div class="base-info">
          <img
            v-if="resumeInfo.userIcon"
            :src="apiHost + resumeInfo.userIcon"
            alt=""
            style="width: 118px; height: 165px"
          />
          <div class="base-wrap" style="display: flex">
            <div class="base-info-item" style="margin-left: 16px">
              <p class="name">姓名：{{ resumeInfo.fullName }}</p>
              <p>性别：{{ resumeInfo.gender === 1 ? "女" : "男" }}</p>
              <p>出生年月： {{ resumeInfo.dateBirth }}</p>
              <p>民族: {{ resumeInfo.nationality }}</p>
              <p>籍贯: {{ resumeInfo.nativePlace }}</p>
            </div>
            <div class="base-info-item">
              <p>出生地: {{ resumeInfo.birthplace }}</p>

              <p>入党时间: {{ resumeInfo.joinParty }}</p>
              <p>参加工作时间: {{ resumeInfo.timeWork }}</p>
              <p>健康状态: {{ resumeInfo.healthStatus }}</p>
              <p>身份证号码: {{ resumeInfo.idCard }}</p>
              <!-- <p>职称或职业资格:  {{ resumeInfo.currentPosition }}</p> -->
            </div>
            <div class="base-info-item">
              <p>全日制教育: {{ resumeInfo.fulltimeSchool }}</p>
              <p>毕业院校及专业: {{ resumeInfo.fullalmaMater }}</p>
              <p>在职教育: {{ resumeInfo.inserviceEducation }}</p>
              <p>现单位及职位: {{ resumeInfo.currentPosition }}</p>
              <p>电话号码: {{ resumeInfo.contactInformation }}</p>
            </div>
          </div>
        </div>
        <div class="info-wrap">
          <p class="sub-title">个人简历</p>
          <p v-html="resumeInfo.resume"></p>
        </div>
        <div class="info-wrap" v-if="resumeInfo.rewardSituation">
          <p class="sub-title">奖惩情况</p>
          <p>{{ resumeInfo.rewardSituation }}</p>
        </div>
        <div class="info-wrap" v-if="resumeInfo.annualResults">
          <p class="sub-title">年度考核结果</p>
          <p>{{ resumeInfo.annualResults }}</p>
        </div>
        <div class="info-wrap">
          <p class="sub-title">附件</p>
          <!-- <p>{{ apiHost + resumeInfo.proofMaterials }}</p> -->
           <a :href="apiHost + resumeInfo.proofMaterials" target="_blank" style="color: #1890ff;">点击下载</a>
        </div>
        <div class="info-wrap" v-if="resumeInfo.familyMembers">
          <p class="sub-title">家庭主要成员及重要社会关系</p>
          <!-- <p>{{ resumeInfo.familyMembers }}</p> -->
          <el-table :data="familyMemberData" border style="width: 100%">
            <el-table-column prop="relationship" label="称谓" width="180">
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="180">
            </el-table-column>
            <el-table-column prop="age" label="年龄"> </el-table-column>
            <el-table-column prop="political" label="政治面貌">
            </el-table-column>
            <el-table-column prop="work" label="工作单位及职务">
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button
          v-if="dialogType === 'checkApply'"
          type="primary"
          @click="handleExamineSubmit('pass')"
          >审核通过</el-button
        >
        <el-button
          v-if="dialogType === 'checkApply'"
          @click="handleExamineSubmit('nopass')"
          >审核不通过</el-button
        >
        <el-button v-if="dialogType === 'view'" @click="examineFlag = false"
          >取消</el-button
        >
      </div>
    </el-dialog>
    <!-- 报名审核不通过弹窗 -->
    <el-dialog
      title="审核不通过"
      width="400px"
      :visible.sync="examineResonDialog"
      append-to-body
    >
      <el-form :model="examineParams">
        <el-form-item label="原因">
          <el-input
            type="textarea"
            v-model="examineParams.auditOpinion"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="examineResonDialog = false">取 消</el-button>
        <el-button type="primary" @click="handleConfirmExamine"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <!-- 缴费审核弹窗 -->
    <el-dialog
      title="缴费审核"
      :visible.sync="payDialog"
      width="500px"
      append-to-body
    >
      <div>
        <div style="margin-right: 20px">缴费证明：</div>
        <div>
          <img :src="payProvesImg" alt="" style="width: 100%; height: 100%" />
        </div>
      </div>
      <div style="display: flex; margin-bottom: 10px">
        <div style="margin-right: 20px">审核结果:</div>
        <div>
          <el-radio-group v-model="payParams.payStatus">
            <el-radio :label="2">通过</el-radio>
            <el-radio :label="3">不通过</el-radio>
          </el-radio-group>
        </div>
      </div>
      <div v-if="payParams.payStatus === 3">
        <el-input
          type="textarea"
          v-model="payParams.auditOpinion"
          placeholder="请填写不通过原因"
        ></el-input>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handlePayubmit">确定</el-button>
        <el-button @click="handleCancelPaySubmit">取消</el-button>
      </div>
    </el-dialog>
    <!-- 考试信息 -->
    <el-dialog
      title="考试信息"
      :visible.sync="examineInfoFlag"
      width="50%"
      append-to-body
    >
      <div class="resume-content" v-if="resumeInfo.enrollRequest">
        <div class="base-info">
          <img
            v-if="resumeInfo.userIcon"
            :src="apiHost + resumeInfo.userIcon"
            alt=""
            style="width: 118px; height: 165px"
          />
          <div class="base-wrap" style="display: flex">
            <div class="base-info-item" style="margin-left: 16px">
              <p class="name">姓名：{{ resumeInfo.fullName }}</p>
              <p>报考单位：{{ resumeInfo.enrollRequest.employer }}</p>
              <p>出生年月： {{ resumeInfo.dateBirth }}</p>
              <p>笔试地址: {{ resumeInfo.enrollRequest.venueAddr }}</p>
            </div>
            <div class="base-info-item">
              <p>身份证号码: {{ resumeInfo.idCard }}</p>
              <p>报考岗位: {{ resumeInfo.enrollRequest.positionName }}</p>
              <p>笔试日期: {{ resumeInfo.enrollRequest.examTime }}</p>
            </div>
            <div class="base-info-item">
              <p>准考证号: {{ resumeInfo.enrollRequest.candNumber }}</p>
            </div>
          </div>
        </div>
        <div class="examine-info" style="margin-bottom: 20px">
          <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="date" label="笔试时间" width="180">
            </el-table-column>
            <el-table-column prop="addressNo" label="考场号" width="180">
            </el-table-column>
            <el-table-column prop="seatNo" label="座位号"> </el-table-column>
          </el-table>
        </div>
        <div class="info-wrap">
          <p class="sub-title">考生须知</p>
          <p>{{ resumeInfo.enrollRequest.examNotice }}</p>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="examineInfoFlag = false">返回</el-button>
      </div>
    </el-dialog>
    <!-- 生成准考证 -->
    <admissionTicket
      v-if="showTicketDialog"
      :showTicketDialog="showTicketDialog"
      :recId="careerId"
      @close="showTicketDialog = false"
    ></admissionTicket>
  </div>
</template>

<script>
import {
  enrollList,
  updateEnroll,
  statistician,
  studentInfo,
} from "@/api/system/recuit";
import admissionTicket from "./admissionTicket.vue";

export default {
  name: "joinCompany",
  props: {
    careerId: {
      type: Number,
      required: true,
    },
    careerFairTitle: {
      type: String,
      default: "ssss",
    },
    examType: {
      type: Number,
      required: true,
    },
  },
  components: {
    admissionTicket,
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      examineFlag: false,
      payDialog: false,
      examineInfoFlag: false,
      examineDialogLoading: false,
      examineResonDialog: false,
      showTicketDialog: false,

      statistics: {},
      recId: "",
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      isEdit: false,
      // 总条数
      total: 0,
      // 招聘会管理表格数据
      joinCompanyList: [],
      careerFairList: [],
      companyList: [],
      stationList: [],
      detailTableData: [],
      familyMemberData: [],
      careerSingleData: {},
      companyCareerFairList: [
        {
          id: this.careerId,
          compId: "",
          stationIds: [],
        },
      ],
      // 弹出层标题
      title: "",
      compCurrentName: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        fullName: "",
        auditStatus: "",
        payStatus: "",
      },
      selectCompList: [],

      // 表单参数
      form: {},
      examineParams: {
        id: "",
        auditStatus: "",
        auditOpinion: "",
      },
      payParams: {
        id: "",
        payStatus: "",
        auditStatus: "",
        auditOpinion: "",
      },
      // 表单校验
      rules: {
        careerTitle: [
          { required: true, message: "招聘标题不能为空", trigger: "blur" },
        ],
      },
      compAreaNum: "",
      dialogType: "",
      resumeInfo: "",

      checkStatusList: [
        {
          label: "全部",
          value: "",
        },
        {
          label: "待审核",
          value: 0,
        },
        {
          label: "审核通过",
          value: 1,
        },
        {
          label: "审核不通过",
          value: 2,
        },
      ],
      checkPayStatusList: [
        {
          label: "全部",
          value: "",
        },
        {
          label: "待支付",
          value: 0,
        },
        {
          label: "待审核",
          value: 1,
        },
        {
          label: "已通过",
          value: 2,
        },
        {
          label: "不通过",
          value: 3,
        },
      ],
      payProvesImg: "",
    };
  },
  created() {
    console.log(this.careerId, "created");
    this.getList();
    this.getStationCount(this.careerId);
  },
  computed: {
    apiHost() {
      return process.env.VUE_APP_BASE_API;
    },
    
    tableData() {
      return [
        {
          date:
            this.resumeInfo.enrollRequest.startTime +
            "-" +
            this.resumeInfo.enrollRequest.endTime,
          addressNo: this.resumeInfo.enrollRequest.roomName,
          seatNo: this.resumeInfo.enrollRequest.seatNumber,
        },
      ];
    },
    // userAge() {
    //     var birthDate = this.resumeInfo.dateBirth.split('-')[0]
    //     return new Date().getFullYear() - Number(birthDate)
    // }
  },
  methods: {
    /** 查询参与单位列表 */
    getList() {
      this.loading = true;
      enrollList({
        recId: this.careerId,
        ...this.queryParams,
      }).then((response) => {
        this.joinCompanyList = response.rows;
        // this.compAreaNum = response.data.compAreaNum
        this.loading = false;
      });
    },

    // 统计数据
    getStationCount(id) {
      statistician(id).then((res) => {
        console.log(res);
        this.statistics = res.data;
      });
    },

    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        careerTitle: null,
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      // this.resetForm("queryForm");
      (this.queryParams = {
        fullName: "",
        auditStatus: "",
        payStatus: "",
      }),
        this.handleQuery();
    },
    // 生成准考证
    handleMakeTicket() {
      this.recId = this.careerId;
      this.showTicketDialog = true;
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },

    // 报名审核
    handleApplyCheck(row) {
      this.resumeInfo = row;
      this.dialogType = "checkApply";
      this.examineFlag = true;
      this.examineParams.id = row.id;
    },
    // 缴费审核
    handlePayCheck(row) {
      this.dialogType = "checkPay";
      this.payParams.id = row.id;
      this.payProvesImg = row.payProves;
      this.payDialog = true;
    },
    // 考生信息
    handleViewStuInfo(row) {
      studentInfo(row.id).then((res) => {
        console.log(row, res, "handleViewStuInfo");
        if (res.code === 200) {
          this.resumeInfo = res.data
          this.dialogType = 'view'
          this.examineFlag = true
          this.familyMemberData = this.getFamilyMemberData(res.data)
        }
      });
    },
    getFamilyMemberData(res) {
      let tempArr = [],
        resultArr = [];
      if (res.familyMembers.indexOf(",") > -1) {
        tempArr = res.familyMembers.split(",");
        tempArr.forEach((item, index) => {
          var strArr = item.split("/");
          var obj = {
            relationship: strArr[0],
            name: strArr[1],
            age: strArr[2],
            political: strArr[3],
            work: strArr[4],
          };
          resultArr.push(obj);
        });
      } else {
        tempArr = res.familyMembers.split("/");
        var obj = {
          relationship: tempArr[0],
          name: tempArr[1],
          age: tempArr[2],
          political: tempArr[3],
          work: tempArr[4],
        };
        resultArr.push(obj);
      }
      console.log(resultArr, 'familyMemberData')

      return resultArr;
    },
    // 考试信息
    handleViewExamInfo(row) {
      this.resumeInfo = row;
      console.log(this.resumeInfo, "handleViewExamInfo");

      this.dialogType = "examInfo";
      this.examineInfoFlag = true;
    },

    mapAuditStatus(type) {
      // 1等待报名审核 2审核不通过 3审核通过，请缴纳报名费 4审核通过，请等待考试安排 5缴费成功，请等待考试安排 6缴费不通过 7请下载笔试准考证 8查看成绩
      switch (type) {
        case 1:
          return {
            class: "wait",
            text: "等待报名审核",
          };
        case 2:
          return {
            class: "fail",
            text: "审核不通过",
          };
        case 3:
          return {
            class: "pass",
            text: "审核通过，待缴费",
          };
        case 4:
          return {
            class: "pass",
            text: "审核通过，待考试安排",
          };
        case 5:
          return {
            class: "pass",
            text: "缴费成功，待考试安排",
          };
        case 6:
          return {
            class: "fail",
            text: "缴费审核不通过",
          };
        case 7:
          return {
            class: "wait",
            text: "请下载笔试准考证",
          };
        case 8:
          return {
            class: "wait",
            text: "查看成绩",
          };
        case 9:
          return {
            class: "wait",
            text: "缴费证明审核中",
          };
      }
    },

    // 审核弹窗逻辑
    handleExamineSubmit(type) {
      if (type === "pass") {
        this.$confirm("审核通过后系统将会下发缴费通知, 是否继续?", "审核通过", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            // examType 考试类型 0=免费,1=收费
            this.examineParams.auditStatus =
              this.resumeInfo.examType === 0 ? 4 : 3;
            updateEnroll(this.examineParams).then((res) => {
              this.$modal.msgSuccess("操作成功");
              this.examineFlag = false;
              this.getList();
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消",
            });
          });
      } else {
        this.examineResonDialog = true;
      }
    },
    // 审核不通过
    handleConfirmExamine() {
      this.examineParams.auditStatus = 2;
      updateEnroll(this.examineParams).then((res) => {
        this.$modal.msgSuccess("操作成功");
        this.examineResonDialog = false;
        this.examineFlag = false;
        this.getList();
      });
    },

    // 缴费审核
    handlePayubmit() {
      this.payParams.auditStatus = this.payParams.payStatus === 2 ? 5 : 6;
      updateEnroll(this.payParams).then((res) => {
        this.$modal.msgSuccess("操作成功");
        this.payDialog = false;
        this.getList();
      });
    },
    handleCancelPaySubmit() {
      this.payParams.payStatus = "";
      this.payParams.auditOpinion = "";
      this.payDialog = false;
    },
    calculateAge(birthDateString) {
      // 分割日期字符串
      const [birthYear, birthMonth, birthDay] = birthDateString
        .split("-")
        .map(Number);

      // 获取当前日期
      const today = new Date();
      const currentYear = today.getFullYear();
      const currentMonth = today.getMonth() + 1; // 月份从0开始，需+1
      const currentDay = today.getDate();

      // 计算年龄基数
      let age = currentYear - birthYear;

      // 判断是否已过生日
      if (
        currentMonth < birthMonth ||
        (currentMonth === birthMonth && currentDay < birthDay)
      ) {
        age--;
      }

      return age;
    },
  },
};
</script>
<style lang="scss" scoped>
.info-item {
  margin-bottom: 16px;
  font-weight: 600;
  font-size: 16px;
  color: #333;
}

.total-box {
  span {
    margin-right: 10px;
  }
}

.resume-content {
  .base-info {
    display: flex;
    margin-top: 16px;
    margin-bottom: 20px;

    img {
      width: 160px;
      height: 160px;
    }

    .base-info-item {
      margin-right: 50px;

      .name {
        font-size: 16px;
        font-weight: 600;
      }

      p {
        margin-bottom: 16px;
      }
    }
  }

  .status-text {
    font-weight: 600;
    font-size: 14px;
    text-align: left;
    font-style: normal;

    &.wait {
      color: #ff7f1c;
    }

    &.fail {
      color: #34314f;
    }

    &.pass {
      color: #1fbf70;
    }
  }

  .info-wrap {
    margin-bottom: 16px;
  }

  .sub-title {
    margin-bottom: 10px;
    color: #000;
    font-weight: 600;
  }

  p {
    padding: 0;
    margin: 0;
  }
}
</style>